<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>

<body>
    <p>

        我是一个p
        <br>
        <span>
            p中span
            <!-- p元素中不可以放块元素 -->
            <!-- 给p元素设置红色 但是span也变成了红色 这就是继承吗 -->
            <!-- 样式的继承 -->
            <!-- 为一个元素设置样式 也会被应用到他的后代 是后代即可 -->
            <!-- 不一定非要是子元素 -->
            <!-- 继承发生在祖先元素和后代之间 -->
            <!-- 利用继承可以将一些通用的样式设置到共同的祖先元素上 -->
            <!-- 这样设置一次即可 -->
            <!-- 方便开发  -->
            <!-- 通用样式可以统一设置 -->
            <!-- 并不会继承所有的样式 -->
            <!-- 比如背景 布局相关都不会被继承 -->
            <!-- 除了背景颜色 还有背景图片 -->
            <!-- 这东西要学会查询  -->
            <!-- 选择器的累加不会超过其最大的数量级 -->
            <!-- 写的样式没有生效 要想一想是不是优先级不够 -->
            <!-- 优先级相同 优先使用 靠下的  下面的会覆盖 -->
            <!-- 通配的选择器 是0          继承的 没有优先级  谁都可以覆盖 -->
            <!-- 谁都可以覆盖 -->
        </span>
    </p>
</body>

</html>